<template>
  <div class="description">
    <div v-for="(item, index) in data" :key="index" class="pane" :style="{ 'flex-direction': direction, width: item.width || colWidth || '50%' }">
      <div class="label">
        {{ item.label }}
      </div>
      <div class="value">
        <slot v-if="item.slot" :name="item.slot"></slot>
        <template v-else>
          {{ item.value }}
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    direction: {
      type: String,
      default: "row"
    },
    colWidth: {
      type: String,
      default: "50%"
    }
  }
};
</script>
<style lang="scss" scoped>
.description {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border: .5px solid #CAD2E6;
  

  * {
    box-sizing: inherit;
    text-align: inherit;
  }

  .pane {
    display: inline-flex;

    .label {
      flex: 1 1 50%;
      padding: 6px 0;
      background-color: #cad2e6;
      font-size: 14px;
      color: #4d4d4d;
    }

    .value {
      flex: 1 1 50%;
      padding: 6px 0;
      font-size: 14px;
      color: #808080;
    }
  }
}
</style>
